<template>
  <div class="component-detail">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <div class="back-link" @click="$router.back()">
          <span class="arrow">←</span> 返回组件库
        </div>
        <div class="header-content">
          <div class="component-icon">
            <img :src="component.icon" :alt="component.name" />
          </div>
          <div class="title-section">
            <h1>{{ component.name }}</h1>
            <div class="metadata">
              <span class="tag version">v{{ component.version }}</span>
              <span class="tag category">{{ component.category }}</span>
            </div>
            <p class="description">{{ component.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <div class="container">
        <div class="content-wrapper">
          <!-- 左侧内容 -->
          <div class="content-main">
            <!-- 工作流展示 -->
            <section class="section" id="workflow">
              <h2>工作流展示</h2>
              <div class="workflow-showcase">
                <img
                  src="/images/components/ksampler-workflow.png"
                  alt="KSampler工作流"
                  class="workflow-image"
                  @click="openEnlargedImage('/images/components/ksampler-workflow.png')"
                />
              </div>
            </section>

            <!-- 效果展示 -->
            <section class="section" id="results">
              <h2>效果展示</h2>
              <div class="results-showcase">
                <div class="result-item">
                  <img
                    src="/images/components/ksampler-result1.png"
                    alt="生成效果1"
                    class="result-image"
                  />
                  <div class="result-info">
                    <h4>示例 1</h4>
                    <p>使用参数：steps=20, cfg=7.5, sampler=euler_a</p>
                  </div>
                </div>
                <div class="result-item">
                  <img
                    src="/images/components/ksampler-result2.png"
                    alt="生成效果2"
                    class="result-image"
                  />
                  <div class="result-info">
                    <h4>示例 2</h4>
                    <p>使用参数：steps=30, cfg=8.0, sampler=dpm++</p>
                  </div>
                </div>
              </div>
            </section>

            <!-- 使用示例 -->
            <section class="section" id="example">
              <h2>使用示例</h2>
              <div class="example-block">
                <div class="example-code">
                  <div class="code-header">
                    <span>示例代码</span>
                    <button
                      class="copy-btn"
                      @click="copyCode"
                      :disabled="!component.example.code"
                    >
                      <el-icon><DocumentCopy /></el-icon>
                      复制代码
                    </button>
                  </div>
                  <pre v-if="component.example.code" class="code-content"><code>{{ component.example.code }}</code></pre>
                  <div v-else class="no-code-placeholder">
                    暂无示例代码
                  </div>
                </div>
              </div>
            </section>

            <!-- 注意事项 -->
            <section class="section" id="notes">
              <h2>注意事项</h2>
              <ul class="notes-list">
                <li v-for="(note, index) in component.notes" :key="index">
                  {{ note }}
                </li>
              </ul>
            </section>
          </div>

          <!-- 右侧目录 -->
          <div class="content-toc">
            <div class="toc-title">目录</div>
            <nav class="toc-nav">
              <a href="#workflow" class="toc-item">工作流展示</a>
              <a href="#results" class="toc-item">效果展示</a>
              <a href="#example" class="toc-item">使用示例</a>
              <a href="#notes" class="toc-item">注意事项</a>
            </nav>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片放大弹窗 -->
    <div
      v-if="enlargedImage"
      class="enlarged-image-overlay"
      @click="closeEnlargedImage"
    >
      <div class="enlarged-image-container" @click.stop>
        <img
          :src="enlargedImage"
          alt="放大图片"
          class="enlarged-image"
        />
        <button class="close-enlarged-btn" @click="closeEnlargedImage">
          &times;
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { fetchComponentDetail } from '../services/api';
import { ElMessage } from 'element-plus';
import { Loading, Warning } from '@element-plus/icons-vue';

const route = useRoute();
const component = ref({
  id: '',
  name: '',
  description: '',
  icon: '',
  category: '',
  version: '',
  tags: [],
  inputs: [],
  outputs: [],
  example: {
    code: '',
  },
  notes: [],
  workflow: {
    image: '/images/components/ksampler-workflow.png'
  }
});
const loading = ref(true);
const error = ref(null);
const enlargedImage = ref(null);

const openEnlargedImage = (imageUrl) => {
  enlargedImage.value = imageUrl;
};

const closeEnlargedImage = () => {
  enlargedImage.value = null;
};

const copyCode = () => {
  if (component.value.example.code) {
    navigator.clipboard.writeText(component.value.example.code).then(() => {
      ElMessage.success('代码已复制到剪贴板');
    }).catch((err) => {
      console.error('复制失败:', err);
      ElMessage.error('复制失败');
    });
  }
};

onMounted(async () => {
  try {
    const componentId = route.params.id;
    loading.value = true;

    const response = await fetchComponentDetail(componentId);
    const componentData = response.data?.data || response.data;

    if (componentData) {
      component.value = {
        ...component.value,
        ...componentData,
        // 确保所有必要字段都有默认值
        example: componentData.example || { code: 'dsadasda' },
        notes: componentData.notes || [],
        workflow: {
          image: componentData.workflow?.image || '/images/components/ksampler-workflow.png'
        }
      };
    } else {
      error.value = '未找到组件详情';
      ElMessage.error('未找到组件详情');
    }
  } catch (err) {
    console.error('获取组件详情失败:', err);
    error.value = err.message || '获取组件详情失败';
    ElMessage.error(error.value);
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>
.component-detail {
  min-height: 100vh;
  background: #111827;
}

.page-header {
  background: #1f2937;
  padding: 40px 0;
  border-bottom: 1px solid #374151;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  color: #9ca3af;
  cursor: pointer;
  margin-bottom: 32px;
  transition: color 0.2s;
}

.back-link:hover {
  color: #f3f4f6;
}

.arrow {
  margin-right: 8px;
}

.header-content {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.component-icon {
  width: 64px;
  height: 64px;
  background: #374151;
  border-radius: 16px;
  padding: 12px;
}

.component-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.title-section h1 {
  font-size: 2.5rem;
  color: #f3f4f6;
  margin-bottom: 16px;
}

.metadata {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.tag {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.9rem;
}

.version {
  background: #3450ff;
  color: white;
}

.category {
  background: #374151;
  color: #9ca3af;
}

.description {
  color: #9ca3af;
  font-size: 1.1rem;
  max-width: 600px;
}

.main-content {
  padding: 48px 0;
}

.content-wrapper {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 64px;
}

.section {
  margin-bottom: 48px;
}

.section h2 {
  font-size: 1.8rem;
  color: #f3f4f6;
  margin-bottom: 24px;
}

.example-block {
  background: #1f2937;
  border-radius: 12px;
  overflow: hidden;
}

.example-code {
  padding: 0;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #374151;
}

.copy-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #3450ff;
  color: white;
  cursor: pointer;
  font-size: 0.9rem;
}

.copy-btn:hover {
  background: #2440db;
}

pre {
  margin: 0;
  padding: 24px;
  overflow-x: auto;
}

code {
  font-family: 'Fira Code', monospace;
  color: #f3f4f6;
}

.params-table {
  width: 100%;
  border-collapse: collapse;
}

.params-table th,
.params-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #374151;
}

.params-table th {
  color: #f3f4f6;
  font-weight: 500;
  background: #1f2937;
}

.params-table td {
  color: #9ca3af;
}

.params-table td code {
  padding: 2px 6px;
  background: #374151;
  border-radius: 4px;
  font-size: 0.9rem;
}

.notes-list {
  list-style: none;
  padding: 0;
}

.notes-list li {
  color: #9ca3af;
  padding: 12px 0;
  border-bottom: 1px solid #374151;
}

.notes-list li:last-child {
  border-bottom: none;
}

.content-toc {
  position: sticky;
  top: 80px;
}

.toc-title {
  font-size: 1.1rem;
  color: #f3f4f6;
  margin-bottom: 16px;
}

.toc-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toc-item {
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s;
}

.toc-item:hover {
  color: #f3f4f6;
}

.workflow-showcase {
  background: #1f2937;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 32px;
}

.workflow-image {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid #374151;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.workflow-image:hover {
  transform: scale(1.02);
}

.workflow-description {
  padding: 24px;
  color: #9ca3af;
}

.workflow-description ol {
  margin-top: 16px;
  padding-left: 20px;
}

.workflow-description li {
  margin-bottom: 8px;
}

.results-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.result-item {
  background: #1f2937;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.result-item:hover {
  transform: translateY(-4px);
}

.result-image {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid #374151;
}

.result-info {
  padding: 16px;
}

.result-info h4 {
  color: #f3f4f6;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.result-info p {
  color: #9ca3af;
  font-size: 0.9rem;
}

.enlarged-image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  cursor: pointer;
}

.enlarged-image-container {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.enlarged-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.close-enlarged-btn {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 36px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-enlarged-btn:hover {
  color: #ff4500;
}

@media (max-width: 1024px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }

  .content-toc {
    display: none;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
  }

  .title-section h1 {
    font-size: 2rem;
  }

  .results-showcase {
    grid-template-columns: 1fr;
  }
}

.copy-btn {
  background: #1f2937;
  color: #9ca3af;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.copy-btn:hover {
  background: #3450ff;
  color: white;
}
</style>
